<!DOCTYPE html>

<html>
    <head>
        <title>Training communicator</title>
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
        <style>
		body { margin:0; padding:0; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
		h1 {font-family: 'Lobster', cursive; color:#FFF; margin:0 auto; padding:40px 0; text-align:center; font-size:50px;}
		.topBar { width:100%; height:152px; background:url(img/bgTop.png) repeat-x;}
		.contentBox { width:100%;background: #E8E8EA;}
		.content { width:980px; margin:0 auto; padding:20px;}
		.data { float:left; margin:50px;}
		.btn { background:#649ED9; color:#FFF; padding:5px 20px; font-weight:bold; border:1px solid #649ED9; cursor:pointer;} 
		.btn:hover { background:#28292A; color:#FFF; padding:5px 20px; font-weight:bold; border:1px solid #FFF; cursor:pointer;} 
		.footer { width:100%; background:url(img/bgFooter.jpg) repeat-x; height:250px; text-align:center;}
		.footer img { padding-top:20px;}
		.left { float:left;}
		.right { float:right;} 
		.reset { clear:both;} 
		</style>
        
    </head>
    <body>
    <!-- header zone -->
    <div class="topBar">
    <h1>Welcome!</h1>
    </div>
    <!-- header zone -->
    
    <!-- content zone -->
    <div class="contentBox">
    <div class="content">
    
    <div class="left">
    <img src="img/boy.png" width="375" height="400">
    </div>
    
    <div class="data">
    <label for="UserName">I am</label>
		<input id="UserName" />
		<input type="button" id="LogIn" value="LogIn" class="btn" />
		<br/>

		<label for="LoggedInUsersContainer">Users:</label>
		<div id="LoggedInUsersContainer"></div>
			<div class="left"><img src="img/christophe.png" width="40" height="60"> <br> Christophe</div>
			<div class="left"><img src="img/divider.png" width="40" height="60"></div>
			<div class="left"><img src="img/brecht.png" width="40" height="60"> <br> Bregt</div>
            <div class="reset"></div>
		<br/>
	
    <hr>
		<br/>
   
	  <label for="UserInput">Type here</label>
		<input id="UserInput" />
		<input type="button" id="Send" value="Send" class="btn" />
		<br/>
		<img src="img/icoMsg.png" width="40" height="35">  <label for="MessagesContainer">Messages:</label>
		<div id="MessagesContainer"></div>
 			<div><img src="img/christophe.png" width="20"> Christophe: "hallo Bregt"</div>
			<div><img src="img/brecht.png" width="20"> Bregt: "goede morgen"</div>
			<div><img src="img/brecht.png" width="20"> Bregt: "hoe gaat het"</div>
       </div>
      </div>
      
      
      <div class="reset"></div>
       
       
    </div>   
    </div>   
    <!-- content zone -->
    
    <!-- footer zone -->
    <div class="footer">
    <img src="img/html5.png" width="180" height="210"> <img src="img/plus.png" width="130" height="210"> <img src="img/coffie.png" width="190" height="210">
    <img src="img/equal.png" width="110" height="210"> <img src="img/heart.png" width="230" height="210"></div>
    <!-- footer zone -->

       
</body>

</html>